<div
#anchorRef
[style.left.px]="LogicWebServer.options.X"
[style.top.px]="LogicWebServer.options.Y"
>
    <template #conn></template>
    <div class="img-container" (mousedown)="handleMousedown( $event )" (touchstart)="handleMousedown($event)"
    (click)="handleClick($event)">
        <span class="img bg-webserver"></span>
    </div>  
</div>
<div style="display:none">
    <div #options>
        <div class="options-type-container">
            <span class="property-name">Type: <info-tooltip [Message]="'Changes the type of endpoints the Web Server has. This can change the behaviour of endpoints.'"></info-tooltip></span>
            <div>
                <mat-form-field appearance="fill" class="action-endpoint">
                    <mat-select (selectionChange)="handleTypeChange(); afterChange()" [(ngModel)]="LogicWebServer.options.type">
                        <mat-option *ngFor="let type of APITypeKeys" [value]="type">{{APIType[type]}}</mat-option>
                    </mat-select>
                </mat-form-field>
            </div>
        </div>
        <endpoint-select
        [Model]="LogicWebServer"
        [Type]="LogicWebServer.options.type"
        [HasStreamActions]="true"
        [ConnectableEndpoints]="connectableEndpoints"
        [AfterChange]="afterChange"
        ></endpoint-select>
    </div>
    <div #simulations>
        <slider-described
        [Model]="LogicWebServer"
        [AfterChange]="afterChange"
        ></slider-described>
    </div>
</div>